<template>
  <u-form labelWidth="auto">
    <view>
      <view style="display: flex">
        <view>
          <view class="option" style="width: 520rpx">
            <view class="lf">关联借款申请</view>
            <view class="rl">{{ filterMultiDictText(this.dictOptions['loanBillId'], item.loanBillId + '') }}</view>
          </view>

          <view class="option" style="width: 520rpx">
            <view class="lf">借款金额（元）</view>
            <view class="rl">{{ item.amount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">使用日期</view>
            <view class="rl">{{ item.useDate }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">归还日期</view>
            <view class="rl">{{ item.returnDate }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">本次还款金额（元）</view>
            <view class="rl">{{ item.currentReturnAmount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">累计已还金额（元）</view>
            <view class="rl">{{ item.returnedTotalAmount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">累计已报销金额（元）</view>
            <view class="rl">{{ item.reimbursedTotalAmount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">总冲账金额（元）</view>
            <view class="rl">{{ item.totalAmount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">剩余未还金额（元）</view>
            <view class="rl">{{ item.unreturnedTotalAmount }}</view>
          </view>
          <view class="option" style="width: 520rpx">
            <view class="lf">备注</view>
            <view class="rl">{{ item.remark }}</view>
          </view>
        </view>

        <view style="flex: 1; display: flex; align-items: center; justify-content: flex-end">
          <u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="handleEidtForm(item, index)"></u-icon>
          <u-line direction="col" length="20" margin="0 10rpx"></u-line>
          <u-icon name="trash-fill" color="red" size="20" @click="handleRemoveForm(item)"></u-icon>
        </view>
      </view>
    </view>
  </u-form>
</template>

<script>
import { filterMultiDictText } from '@/utils/JDictSelectUtil.js'

export default {
  name: 'SplitFormInfo',
  props: {
    formType: {
      type: String,
      default: 'trip',
    },
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    dictOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      filterMultiDictText,
    }
  },
  computed: {
    isTrip() {
      return this.formType === 'trip'
    },
    isDrive() {
      return this.formType === 'drive'
    },
  },
  methods: {
    // handleEidtTripForm(item) {
    //   this.$emit('edit', [item, this.index])
    // },
    // handleRemoveTripForm(item) {
    //   this.$emit('remove', item)
    // },
    handleCopyForm(item) {
      this.$emit('copy', [item, this.index])
    },
    handleEidtForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
      uni.showModal({
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('remove', item)
          }
        },
      })
    },
  },
}
</script>

<style scoped></style>
